<template>
  <el-dialog show-close
             :title="'【'+modelEntity.name+'】流程设计'"
             :visible.sync="dialogVisible"
             :before-close="handleClose"
             :fullscreen="true"
             append-to-body>
    <div class="containers">
      <div class="canvas" ref="canvas"></div>
        <div id="js-properties-panel"  class="panel"></div>
    </div>
  </el-dialog>
</template>

<script>
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import BpmnModeler from 'bpmn-js/lib/Modeler'
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

import {getModelEditorSource, saveModelEditorSource} from "@/api/start/activiti/modelApi";
import {createEmptyTemplate} from "@/components/activit/components/BpmnUtils";

export default {
  name: "index",
  data() {
    return {
      dialogVisible: false,
      modelId: null,
      modelEntity: null,
      modelXmlStr: null,
      bpmnModeler: null,
      container: null,
      canvas: null,
      bpmnXmlStr: null,
    }
  },
  created() {
  },
  methods: {
    show(model) {
      this.modelEntity = model;
      this.modelId = model.id;
      this.dialogVisible = true
      this.$nextTick(() => this.loadModelBpmnData());
    },
    loadModelBpmnData() {
      getModelEditorSource(this.modelId).then(res => {
        if (!res.data.data) {
          res.data.data = createEmptyTemplate();
        }
        this.bpmnXmlStr = res.data.data;

        this.loadModelBpmnView(this.bpmnXmlStr);
      })
    },
    loadModelBpmnView(xmlStr) {

      const canvas = this.$refs.canvas
      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        //添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          // 右边的属性栏
          propertiesProviderModule,
          propertiesPanelModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
      this.createNewDiagram(xmlStr)
    },
    createNewDiagram(xmlStr) {
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(xmlStr, (err) => {
        if (err) {
          console.error(err)
        } else {
          // 这里是成功之后的回调, 可以在这里做一系列事情
          this.success()
        }
      })
    },
    success() {
      // console.log('创建成功!')
    },
    handleClose() {
      this.dialogVisible = false;
    },
  }
}
</script>

<style scoped>
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.canvas {
  width: 100%;
  height: 100%;
}

.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 95%;
  overflow-y: scroll;
}
</style>
